var canvas = document.getElementById('canvas');

var drawBoard = {
    //定义全局变量
    gloaObj: {

        W: document.body.clientWidth,
        H: document.body.clientHeight,
        CTX: null,
        DATA: [],	//储存绘制数据
        COLOR: '#f00056',
        LINE: 5,
        PENS: 0,
        ERAS: 0,
        TIMER: null,


    },
    init: function () {
        //显示画板
        this.showBoard();
        //默认画笔功能
        this.drawPen();
    },
    //显示画板
    showBoard: function () {

        var canvas = document.getElementById('canvas');
        drawBoard.gloaObj.CTX = canvas.getContext('2d');

        canvas.style.display = 'block';
        canvas.width = this.gloaObj.W;
        canvas.height = this.gloaObj.H;


    },
    //画笔功能
    drawPen: function () {

        var that = this;
        document.onmousedown = function (ev) {
            console.log('onmousedown');
            var ev = ev || event;
            var sx = ev.clientX;
            var sy = ev.clientY;
            that.gloaObj.PENS++;
            //画笔性能优化 没36ms取一个点
            var onOff = true;

            SendMsg({
                method: 'imitateDown',
                params: {
                    oElement: null,
                    sx: 200,
                    sy: 400
                },
                scope: null
            })


            document.onmousemove = function (ev) {
                console.log('onmousemove');


                // if (!onOff) return;
                // onOff = false;
                // setTimeout(function () {
                //     onOff = true;
                // }, 36);
                var ev = ev || event;
                var ex = ev.clientX;
                var ey = ev.clientY;
                var n = that.gloaObj.DATA.length;

                that.gloaObj.DATA[n] = new Object();
                //为画笔绘制的对象定义属性'point-line'
                //将该对象存入绘制数据中
                that.gloaObj.DATA[n].attr = 'point-line';
                that.gloaObj.DATA[n].count = that.gloaObj.PENS;
                that.gloaObj.DATA[n].sx = sx;
                that.gloaObj.DATA[n].sy = sy;
                that.gloaObj.DATA[n].ex = ex;
                that.gloaObj.DATA[n].ey = ey;
                that.gloaObj.DATA[n].w = that.gloaObj.LINE;
                that.gloaObj.DATA[n].c = that.gloaObj.COLOR;
                //直接绘制
                that.gloaObj.CTX.beginPath();
                that.gloaObj.CTX.moveTo(sx, sy);
                that.gloaObj.CTX.lineTo(ex, ey);
                that.gloaObj.CTX.closePath();
                that.gloaObj.CTX.strokeStyle = that.gloaObj.COLOR;
                that.gloaObj.CTX.lineJoin = 'round';
                that.gloaObj.CTX.lineCap = 'round';
                that.gloaObj.CTX.lineWidth = that.gloaObj.LINE;
                that.gloaObj.CTX.stroke();
                sx = ex;
                sy = ey;

                // SendMsg({
                //     func: imitateMove,
                //     params: {
                //         oElement: document.body,
                //         sx: 166,
                //         sy: 166
                //     },
                //     scope: window
                // })
            };

            document.onmouseup = function () {
                document.onmousemove = '';
                // SendMsg({
                //     func: imitateUp,
                //     params: {
                //         oElement: document.body,
                //         sx: 166,
                //         sy: 166
                //     },
                //     scope: window
                // })
            };

            return false;
        };
    }
};

var drawQueue = [];

function sayHello(str) {
    str = str || "hello";
    alert(str);
}


$("#btn_send").click(function () {
    //测试excuteFunc是否可用
    excuteFunc(sayHello, "123")

});

function excuteFunc(data) {

    var method, params, scope;
    method = data.method;
    params = data.params
    scope = data.scope;
    scope = scope || window;

    if (typeof (method) == "string") {
        scope[method](params);
    } else {
        method.call(scope, params);
    }


}


//初始化  其实直接调就行 测试而已
excuteFunc({
    method: drawBoard.init,
    params: {},
    scope: drawBoard
});


function imitateClick(params) {
    var oElement = params.oElement;
    var sx = params.sx;
    var sy = params.sy;
    var oEvent;
    if (document.createEventObject) { //For IE
        oEvent = document.createEventObject();
        oEvent.clientX = sx;
        oEvent.clientY = sy;
        oElement.fireEvent("onclick", oEvent);
    } else {
        oEvent = document.createEvent("MouseEvents");
        oEvent.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0,
            sx, sy/*, false, false, false, false, 0, null*/);
        oElement.dispatchEvent(oEvent);
    }
}

function imitateDown(params) {
    var oElement = params.oElement;
    var sx = params.sx;
    var sy = params.sy;
    var oEvent;
    if (document.createEventObject) { //For IE
        oEvent = document.createEventObject();
        oEvent.clientX = sx;
        oEvent.clientY = sy;
        oElement.fireEvent("onmousedown", oEvent);
    } else {
        oEvent = document.createEvent("MouseEvents");
        oEvent.initMouseEvent("mousedown", true, true, document.defaultView, 0, 0, 0,
            sx, sy/*, false, false, false, false, 0, null*/);
        oElement.dispatchEvent(oEvent);
    }
}

function imitateMove(params) {
    var oElement = params.oElement;
    var sx = params.sx;
    var sy = params.sy;
    var oEvent;
    if (document.createEventObject) { //For IE
        oEvent = document.createEventObject();
        oEvent.clientX = sx;
        oEvent.clientY = sy;
        oElement.fireEvent("onmousemove", oEvent);
    } else {
        oEvent = document.createEvent("MouseEvents");
        oEvent.initMouseEvent("mousemove", true, true, document.defaultView, 0, 0, 0,
            sx, sy/*, false, false, false, false, 0, null*/);
        oElement.dispatchEvent(oEvent);
    }
}


function imitateUp(params) {
    var oElement = params.oElement;
    var iClientX = params.iClientX;
    var iClientY = params.iClientY;

    var oEvent;
    if (document.createEventObject) { //For IE
        oEvent = document.createEventObject();
        oEvent.clientX = iClientX;
        oEvent.clientY = iClientY;
        oElement.fireEvent("onmouseup", oEvent);
    } else {
        oEvent = document.createEvent("MouseEvents");
        oEvent.initMouseEvent("mouseup", true, true, document.defaultView, 0, 0, 0,
            iClientX, iClientY/*, false, false, false, false, 0, null*/);
        oElement.dispatchEvent(oEvent);
    }
}


// imitateClick({
//     oElement: document.body,
//     sx: 100,
//     sy: 100
// });


function Test() {

    excuteFunc({
        method: imitateDown,
        params: {
            oElement: document.body,
            sx: 166,
            sy: 166
        },
        scope: window
    })

    excuteFunc({
        method: imitateMove,
        params: {
            oElement: document.body,
            sx: 166,
            sy: 166
        },
        scope: window
    })



    for (var i = 0; i < 100; i++) {

        excuteFunc({
            method: imitateMove,
            params: {
                oElement: document.body,
                sx: 166 + (i * 1),
                sy: 166 + (i * 1)
            },
            scope: window
        });
    }

    excuteFunc({
        method: imitateUp,
        params: {
            oElement: document.body,
            sx: 166,
            sy: 166
        },
        scope: null
    })
}

Test();

//SendMsg("111");

// excuteFunc({
//     method: imitateDown,
//     params: {
//         oElement: document.body,
//         sx: 166,
//         sy: 166
//     },
//     scope: null
// })